<template>
  <div>
    <span ref="isEdit">添加</span>
    <span v-if="status">{{ TodoTitle }}</span>
  </div>
  <hr />
  <span>标题:</span>
  <input type="text" placeholder="请输入代办标题" v-model="TodoTitle" />
  <span>日期:</span>
  <!-- 日历input输入框 -->
  <input type="date" v-model="TodoDate" />
  <br />
  <button @click="handleSubmit" style="margin-bottom: 20px">提交</button>
  <br />
  <button @click="handleAdd">添加</button>
  <!-- 写一个表格, 表头有标题、日期、操作 -->
  <!-- <table>
    <thead>
      <tr>
        <th>标题</th>
        <th>日期</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in tableList" :key="item.id">
        <td>{{ item.title }}</td>
        <td>{{ item.date }}</td>
        <td>
          <button @click="handleChange(item.id)">编辑</button>
          <button @click="handleDel(item.id)">删除</button>
        </td>
      </tr>
    </tbody>
  </table> -->
  <table>
    <thead>
      <tr>
        <th style="width: 100px">标题</th>
        <th style="width: 170px">日期</th>
        <th style="width: 210px">操作</th>
      </tr>
    </thead>
  </table>
  <table>
    <tbody>
      <div
        ref="display"
        style="width: 500px; height: 300px; overflow-y: auto"
        @scroll="onScroll"
      >
        <div class="scroll" :style="{ height: tableList.length * 30 + 'px' }">
          <div
            class="placeholder"
            :style="{ height: currentIndex * 30 + 'px' }"
          ></div>
          <tr v-for="item in renderArr" :key="item" style="height: 30px">
            <td style="width: 150px">{{ item.title }}</td>
            <td style="width: 200px">{{ item.date }}</td>
            <td style="width: 150px">
              <button @click="handleChange(item.id)">编辑</button>
              <button @click="handleDel(item.id)">删除</button>
            </td>
          </tr>
        </div>
      </div>
    </tbody>
  </table>
</template>
<script>
export default {
  data() {
    return {
      TodoTitle: "",
      TodoDate: "",
      tableList: [],
      status: 0,
      currentIndex: 0,
    };
  },
  created() {
    this.tableList = JSON.parse(localStorage.getItem("tableList")) || [];
    // 初始化一个数组 arr，是 1-1000 的数字
    // this.arr = Array.from({ length: 1000 }, (_, k) => k + 1);
  },
  computed: {
    renderArr() {
      return this.tableList.slice(this.currentIndex, this.currentIndex + 11);
    },
  },
  methods: {
    handleSubmit() {
      if (!this.TodoTitle || !this.TodoDate) return alert("请按照要求填写表单");
      if (this.status === 0) {
        this.tableList.push({
          title: this.TodoTitle,
          date: this.TodoDate,
          //   时间戳
          id: new Date().getTime(),
          //   id: this.tableList.length + 1,
        });
      } else {
        const item = this.tableList.find((el) => {
          return el.id === this.status;
        });
        item.title = this.TodoTitle;
        item.date = this.TodoDate;
      }
      this.TodoTitle = "";
      this.TodoDate = "";
      localStorage.setItem("tableList", JSON.stringify(this.tableList));
    },
    handleAdd() {
      this.TodoTitle = "";
      this.TodoDate = "";
      this.status = 0;
      this.$refs.isEdit.innerHTML = "添加";
    },
    handleDel(id) {
      console.log(id);
      const delIndex = this.tableList.findIndex((el) => el.id === id);
      this.tableList.splice(delIndex, 1);
      localStorage.setItem("tableList", JSON.stringify(this.tableList));
    },
    handleChange(id) {
      console.log(id);
      const changeIndex = this.tableList.findIndex((el) => el.id === id);
      this.TodoTitle = this.tableList[changeIndex].title;
      this.TodoDate = this.tableList[changeIndex].date;
      this.status = id;
      this.$refs.isEdit.innerHTML = "编辑:";
    },
    onScroll() {
      this.scrollTop = this.$refs.display.scrollTop;
      this.currentIndex = Math.floor(this.scrollTop / 30);
    },
  },
};
</script>
